<script type="text/javascript">
$(document).ready(function () {
    var dataSource = {
            datatype: "json",
            cache: false,
            datafields: [
                    { name: 'ma_nghe_si', type: 'int' },
                    { name: 'nghe_danh', type: 'string' },
                    { name: 'ngay_gia_nhap', type: 'string' },
                    { name: 'ngay_roi_nhom', type: 'string' }
            ],
            url: 'libs/DSThanhVien.php',
            addrow: function (rowid, rowdata, position, commit) {
                var data = "action=insert&" + $.param(rowdata);
                $.ajax({
                    //dataType: 'json',
                    url: 'controllers/ThanhVien_Controller.php',
                    data: data,
                    type: "POST",
                    cache: false,
                    success: function (data, status, xhr) {
                        commit(true);
                        $('#nhomnhac_thanhvien').jqxGrid('updatebounddata');
                        $('#danhsach_nghesi_chuaconhom').jqxGrid('updatebounddata');
                        console.log("add commited");
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log(textStatus + "  " + errorThrown + "   " + jqXHR.responseText);
                        commit(false);
                    }
                });
            },
            updaterow: function (rowid, rowdata, commit) {
               // synchronize with the server - send update command
               var data = "action=edit&" + $.param(rowdata);
               $.ajax({
                   //dataType: 'json',
                   url: 'controllers/ThanhVien_Controller.php',
                   cache: false,
                   data: data,
                   type: "POST",
                   success: function (data, status, xhr) {
                       // update command is executed.
                       commit(true);
                       $('#nhomnhac_thanhvien').jqxGrid('updatebounddata');
                        $('#danhsach_nghesi_chuaconhom').jqxGrid('updatebounddata');
                       console.log("update commited");
                   },
                   error: function (jqXHR, textStatus, errorThrown) {
                       console.log(textStatus + "  " + errorThrown + "   " + jqXHR.responseText);
                       commit(false);
                   }
               });
           }
        };
    var dataAdapter = new $.jqx.dataAdapter(dataSource, {
        formatData: function (data) {
            $.extend(data, {
                manhom: $("#nhomnhac_id").val()
            });
            return data;
        }
    });
    var nghedanh_renderer = function(row, columnfield, value){
        var data = $('#nhomnhac_thanhvien').jqxGrid('getrowdata', row);
        var id = data["ma_nghe_si"];
        var fileName= "img/nghe_si/" + id + ".png";
        var res = '<img src="' + fileName + '" width="40px" height="40px" style="vertical-align: middle;" onerror="changeSrc(this);"/>  ' + 
                '<strong>' + value + '</strong>';      
        return res;
    };
    $("#nhomnhac_thanhvien").jqxGrid({
        theme:theme, 
        width: 260,
        height:200,
        source: dataAdapter,
        sortable: true,
        rowsheight: 40,
        //autoheight: true,
        columns: [
            { text: 'Mã', datafield: 'ma_nghe_si', width: 50, hidden: false},
            { text: 'Thành viên', datafield: 'nghe_danh', width: 190, hidden: false, cellsrenderer: nghedanh_renderer },
            { text: 'Ngày gia nhập', datafield: 'ngay_gia_nhap', width: 100, hidden: true},
            { text: 'Ngày thành lập', datafield: 'ngay_roi_nhom', hidden: true }
            ]
    });
    $.fn.themThanhVien = function (manhom, mathanhvien, ngaythamgia){
        var datarow = generaterow(manhom, mathanhvien, ngaythamgia, true);
        console.log(datarow);
        $("#nhomnhac_thanhvien").jqxGrid('addrow', null, datarow);
    };
    $.fn.xoaThanhVien = function (manhom, mathanhvien, ngayroinhom){
        var datarow = generaterow(manhom, mathanhvien, ngayroinhom, false);
        console.log(datarow);
        $("#nhomnhac_thanhvien").jqxGrid('updaterow', mathanhvien, datarow);
    };
    var generaterow = function(manhom, mathanhvien, ngay, vaonhom){
        var row={};
        row["manhom"] = manhom;
        row["mathanhvien"] = mathanhvien;
        if (vaonhom) row["ngaythamgia"] = ngay;
        else row["ngayroinhom"] = ngay;
        return row;
    };
});
</script>
<div id="nhomnhac_thanhvien" style="float: left"></div>